<script setup>
import { ref } from 'vue'

const knowledgeTypes = [
  { id: 'tech', name: '技术', icon: '💻', color: 'var(--knowledge-tech)' },
  { id: 'science', name: '理论', icon: '🔬', color: 'var(--knowledge-science)' },
  { id: 'art', name: '艺术', icon: '🎨', color: 'var(--knowledge-art)' },
  { id: 'life', name: '生活', icon: '🌱', color: 'var(--knowledge-life)' }
]

const knowledgeForm = ref({
  title: '',
  type: 'tech',
  description: '',
  children: [{ title: '', progress: 0 }],
  resources: [{ title: '', link: '', type: 'article' }],
  connections: [],
  progress: 0
})

const existingNodes = ref([
  { id: 1, title: '前端开发', type: 'tech' },
  { id: 2, title: '设计模式', type: 'science' },
  { id: 3, title: '项目管理', type: 'life' },
  { id: 4, title: 'UI设计', type: 'art' }
])

const addChild = () => {
  knowledgeForm.value.children.push({ title: '', progress: 0 })
}

const removeChild = (index) => {
  knowledgeForm.value.children.splice(index, 1)
}

const addResource = () => {
  knowledgeForm.value.resources.push({ title: '', link: '', type: 'article' })
}

const removeResource = (index) => {
  knowledgeForm.value.resources.splice(index, 1)
}

const saveKnowledge = () => {
  console.log('保存知识点:', knowledgeForm.value)
  // 这里添加保存逻辑
}
</script>

<template>
  <div class="knowledge-editor">
    <div class="editor-header">
      <h1 class="section-title">编辑知识点</h1>
      <button class="knowledge-btn" @click="saveKnowledge">
        <span>💾</span>
        保存知识点
      </button>
    </div>

    <div class="editor-container">
      <!-- 左侧编辑表单 -->
      <div class="edit-form knowledge-card">
        <div class="form-section">
          <label>知识点标题</label>
          <input 
            v-model="knowledgeForm.title"
            type="text"
            class="knowledge-input"
            placeholder="输入知识点标题"
          >
        </div>

        <div class="form-section">
          <label>知识类型</label>
          <div class="type-selector">
            <button 
              v-for="type in knowledgeTypes"
              :key="type.id"
              :class="['type-btn', knowledgeForm.type === type.id ? 'active' : '']"
              :style="{ '--type-color': type.color }"
              @click="knowledgeForm.type = type.id"
            >
              <span class="type-icon">{{ type.icon }}</span>
              {{ type.name }}
            </button>
          </div>
        </div>

        <div class="form-section">
          <label>描述</label>
          <textarea 
            v-model="knowledgeForm.description"
            class="knowledge-input"
            rows="4"
            placeholder="描述这个知识点..."
          ></textarea>
        </div>

        <div class="form-section">
          <div class="section-header">
            <label>子知识点</label>
            <button class="knowledge-btn small" @click="addChild">
              <span>➕</span>
              添加
            </button>
          </div>
          <div class="children-list">
            <div 
              v-for="(child, index) in knowledgeForm.children"
              :key="index"
              class="child-item"
            >
              <div class="child-inputs">
                <input 
                  v-model="child.title"
                  type="text"
                  class="knowledge-input"
                  placeholder="子知识点名称"
                >
                <div class="progress-input">
                  <input 
                    v-model="child.progress"
                    type="range"
                    min="0"
                    max="100"
                  >
                  <span>{{ child.progress }}%</span>
                </div>
              </div>
              <button 
                class="remove-btn"
                @click="removeChild(index)"
              >×</button>
            </div>
          </div>
        </div>

        <div class="form-section">
          <div class="section-header">
            <label>学习资源</label>
            <button class="knowledge-btn small" @click="addResource">
              <span>➕</span>
              添加
            </button>
          </div>
          <div class="resources-list">
            <div 
              v-for="(resource, index) in knowledgeForm.resources"
              :key="index"
              class="resource-item"
            >
              <div class="resource-inputs">
                <input 
                  v-model="resource.title"
                  type="text"
                  class="knowledge-input"
                  placeholder="资源标题"
                >
                <input 
                  v-model="resource.link"
                  type="text"
                  class="knowledge-input"
                  placeholder="资源链接"
                >
                <select 
                  v-model="resource.type"
                  class="knowledge-input"
                >
                  <option value="article">文章</option>
                  <option value="video">视频</option>
                  <option value="book">书籍</option>
                  <option value="course">课程</option>
                </select>
              </div>
              <button 
                class="remove-btn"
                @click="removeResource(index)"
              >×</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧预览和关联 -->
      <div class="preview-section">
        <div class="preview-card knowledge-card">
          <h3>知识点预览</h3>
          <div class="preview-content">
            <div class="preview-header">
              <h2>{{ knowledgeForm.title || '知识点标题' }}</h2>
              <div 
                class="type-badge"
                :style="{ 
                  background: knowledgeTypes.find(t => t.id === knowledgeForm.type)?.color 
                }"
              >
                {{ knowledgeTypes.find(t => t.id === knowledgeForm.type)?.name }}
              </div>
            </div>
            <p class="preview-description">
              {{ knowledgeForm.description || '知识点描述...' }}
            </p>
            <div class="preview-children">
              <h4>子知识点</h4>
              <div class="children-grid">
                <div 
                  v-for="(child, index) in knowledgeForm.children"
                  :key="index"
                  class="preview-child"
                >
                  <span>{{ child.title || '未命名' }}</span>
                  <div class="preview-progress">
                    <div 
                      class="progress-bar"
                      :style="{ width: child.progress + '%' }"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="connections-card knowledge-card">
          <h3>知识关联</h3>
          <div class="connections-grid">
            <div 
              v-for="node in existingNodes"
              :key="node.id"
              :class="[
                'connection-node',
                knowledgeForm.connections.includes(node.id) ? 'connected' : ''
              ]"
              @click="
                knowledgeForm.connections.includes(node.id)
                  ? knowledgeForm.connections = knowledgeForm.connections.filter(id => id !== node.id)
                  : knowledgeForm.connections.push(node.id)
              "
            >
              <span class="node-title">{{ node.title }}</span>
              <span 
                class="node-type"
                :style="{ background: knowledgeTypes.find(t => t.id === node.type)?.color }"
              >
                {{ knowledgeTypes.find(t => t.id === node.type)?.name }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.knowledge-editor {
  width: 100%;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.editor-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  width: 100%;
}

.edit-form {
  width: 100%;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.type-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.type-btn:hover {
  border-color: var(--type-color);
}

.type-btn.active {
  background: var(--type-color);
  color: white;
}

.type-icon {
  font-size: 1.2rem;
}

.children-list, .resources-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.child-item, .resource-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.child-inputs, .resource-inputs {
  flex: 1;
  display: flex;
  gap: 1rem;
}

.progress-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 150px;
}

.remove-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
}

.remove-btn:hover {
  color: #ef4444;
}

.preview-card {
  margin-bottom: 1.5rem;
}

.preview-content {
  margin-top: 1rem;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.type-badge {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  color: white;
  font-size: 0.9rem;
}

.preview-description {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.preview-children {
  background: var(--background-dark);
  padding: 1rem;
  border-radius: 12px;
}

.children-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.preview-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.preview-progress {
  width: 100px;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.connections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.connection-node {
  padding: 1rem;
  border-radius: 12px;
  background: var(--background-dark);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.connection-node:hover {
  transform: translateY(-2px);
}

.connection-node.connected {
  background: var(--primary-color);
  color: white;
}

.node-type {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  color: white;
}

label {
  color: var(--text-primary);
  font-weight: 500;
}

.knowledge-btn.small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.preview-section {
  width: 100%;
}

/* 调整表单网格布局 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  width: 100%;
}
</style> 